<template>
	<view class="create_customer">
		
		<view class="fllow_form" style="margin: 30rpx 0;">
			<input type="text" class="nameinput" :class="memberName ? 'valueActive' : '' " v-model="memberName" placeholder="输入客户名称" />
			<view class="form_right theme">
				<image style="width: 40rpx;height: 40rpx;
				margin: 0 20rpx 0 30rpx;" :src="BASE_IMG_URL+'chachong.png'" mode="scaleToFill"></image>
				<view @click="checkName" style="color:#03AA96;">查重</view>
			</view>
		</view> 
		<view class="set_head">
			<view class="set_img">
				<image :src="photo_url ? photo_url : BASE_IMG_URL+'headImg.png'"  mode="scaleToFill"></image>
			</view>
			<view class="set_name" @click="changeHeaderImg">
				<view>修改头像</view>
				<view class="iconfont icon-arrows_right"></view>
			</view>
		</view> 
		<form-item v-for="(item,index) in listForm" :height="300" :key="index" :objInfo="item" @changeData="changeData"></form-item>
		  
		<view id="btn" class="btn_g bg-blue button-hover round" @click="$noMultipleClicks(subSave)">
			保存 
		</view> 
 
	</view>
</template>

<script>
	import {
		BASE_IMG_URL
	} from '@/util/api.js'
	import {
		dateTimePicker,
		getMonthDay
	} from '@/util/dateTimePicker.js'
	import {
		netSetForm,
		netStaffDefaultReviewer
	} from '@/api/index.js'
	import formItem from '@/components/form/formitem.vue'
	import {
		checkPhone,
		checkCNPhone
	} from '@/util/util.js'
	import {
		pageJumps
	} from "./createCust_page_jumps.js";
	import {
		netAddkehu,
		netSelect,
		netPrevCustomer,
		netCheckName
	} from '@/api/kehu.js'
	import { netCluesDetail } from '@/api/clues.js'
	import {
		BASE_URL,
		SIGN_NO
	} from '@/util/api.js' 
	export default {
		mixins: [pageJumps],
		components: {
			formItem
		},
		data() {
			return {
				listForm: [],
				BASE_IMG_URL: BASE_IMG_URL,
				noClick: true, //防止  重复点击
				age: '',
				carId: '',
				career: '',
				source: '1',
				address: '',
				remark: '',
				kefu_id: '',
				requirement: '',
				noSaleReason: '',
				married: '1',
				birthday: '',
				birthdayType: '0',
				telephone: '',
				telephone1: '',
				category: '',
				saleStatus_category: '',
				triage_status: '',
				photo_id: '',
				photo_url: null,
				cardnu: '',
				memberName: '',
				mobile: '',
				endTime: '',
				dis_parent1_id: '',
				adviser_ids: '',
				operator_ids: '',
				grade_id: '',
				sex: '0',
			}
		},
		onLoad(options) {
			   
			// #ifdef MP-WEIXIN
			this.initTime()
			// #endif
		},
		onShow() { 
			
			this.init()
		},
		onUnload() { 
		},
		methods: {
			
			changeHeaderImg() {
				uni.chooseImage({
					count:1,
					success:(res)=>{
						let file = res.tempFilePaths[0]
						this.uploadFile(file)
					}
				})
			},
			uploadFile(file){
				uni.uploadFile({
					url:BASE_URL+'common/upload',
					name:'file',
					header:{
						'Authori-vipadmin': uni.getStorageSync('token'),
					},
					formData: {
						"uploadPath": "member",
					},
					// #ifdef MP-ALIPAY
					fileType:'image',
					// #endif
					filePath: file,
					success:(res)=>{
						let data = JSON.parse(res.data).data
						if(data.errorCode == 0) { 
			 					this.photo_url = data.retObj[0].webUploadUrl
			 					this.photo_id = data.retObj[0].acc_id
						}else{
							uni.showToast({
								title:'上传失败',
								icon:'none'
							})
						} 
					},
					fail:(err)=>{
						console.log(err)
					}
				})
			},
			init() {
					this.getForm() 
					this.getSelectlist()
			},
			initTime() {
				// 获取完整的年月日 时分秒，以及默认显示的数组
				let obj = dateTimePicker()
				// 精确到分的处理，将数组的秒去掉
				let lastArray = obj.dateTimeArray.pop();
				let lastTime = obj.dateTime.pop();
				let lastDate = obj.dateArray.pop()
			
				this.dateTimeArray = obj.dateTimeArray
				this.dateTime = obj.dateTime
				this.dateArr = obj.dateArray
			},
			handleTime(arr) {
				let year = this.dateArr[0][arr[0]]
				let month = this.dateArr[1][arr[1]]
				let day = this.dateArr[2][arr[2]]
				let hour = this.dateArr[3][arr[3]]
				let minu = this.dateArr[4][arr[4]]
				let str = year + '-' + month + '-' + day +' '+hour+':'+minu
				return str
			},
			// 选择成员
			moreClick() {
				uni.navigateTo({
					url: '/pagesA/crm/selectMember/selectMember'
				})
			}, 
			getForm() {
				netSetForm({
					type: 'customer'
				}).then(res => {
					res = res.data
					res.forEach((item, index) => {
						if (item.id == 'name') {
							res.splice(index, 1)
						}
						item.value = item.value || ''
					})
					this.listForm = res
				})
			},
			changeData(name, value, obj) {
				var  that = this
				let arr = that.listForm
				arr.forEach((ele, index) => {
					if (ele.id == name) {
						ele.value = value
						that.$set(that.listForm, index, ele)
					}
				})
			},
			handleData(data) {
				let arr = []
				data.forEach(ele => {
					arr.push(ele.name)
				})
				this.plist = arr
			}, 
			//获取  select
			getSelectlist() {
				netSelect().then(res => {
					this.followList = res.data['跟进类型']
					this.sourceList = res.data['客户来源']
				})
			},
			 
			//姓名查重
			checkName() {
				let name = this.memberName
				console.log(name)
				if (!name) {
					uni.showToast({
						title: '请填写客户姓名',
						icon: 'none',
						duration: 2000
					})
					return
				}
				netCheckName({
					name
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					})

				})
			}, 
			confirm(e) {
				this.address_dingwei = e[0].value+e[1].value+e[2].value
			},
			//完成
			subSave() {
				let {
					age,
					carId,
					career,
					source,
					address,
					remark,
					kefu_id,
					requirement,
					noSaleReason,
					married,
					birthday,
					birthdayType,
					telephone,
					telephone1,
					category,
					saleStatus_category,
					triage_status,
					photo_id,
					photo_url,
					cardnu,
					memberName,
					mobile,
					endTime,
					dis_parent1_id,
					adviser_ids,
					operator_ids, 
					grade_id,
					sex,
				} = this
				if (!memberName) {
					uni.showToast({
						title: '请填写客户名称',
						icon: 'none',
						duration: 2000
					})
					return
				}
				  
				// 附加信息
				let arr = []
				let customer = {}
				this.listForm.forEach(ele => {
					arr.push({
						name: ele.id,
						required: ele.config.required,
						msg: ele.config.placeholder,
						value: ele.value
					})
				})
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].required && !arr[i].value) {
						uni.showToast({
							title: arr[i].msg,
							icon: 'none'
						})
						return
					}
					if (arr[i].name == 'mobile' && !checkCNPhone(arr[i].value)) {
						uni.showToast({
							title: '请填写正确的手机号',
							icon: 'none'
						})
						return
					} 
					customer[arr[i].name] = arr[i].value
				}
				 
				customer = Object.assign({}, customer, {
					memberName: memberName,
					photo_id: photo_id,
					photo_url: photo_url,
				})
 				  
				netAddkehu(customer).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pagesA/crm/customerManagement/customerManagement'
						})
					}, 2000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	#btn {
		width: 500rpx;
		height: 88rpx;
		background: #03AA96;
		border-radius: 29rpx;
		font-size: 34rpx;
		color: #fff;
		line-height: 88rpx;
	}

	.linktab {
		padding: 0rpx 24rpx 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.link_right {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.linkbtn {
				margin-right: 15rpx;
				width: 120rpx;
				height: 60rpx;
				border-radius: 45rpx;
				font-size: 24rpx;
				color: #666;
				text-align: center;
				line-height: 58rpx;
				border: 1rpx solid #DDDDDD;
			}

			.linkbtnactive {
				background: #03AA96;
				border: 1rpx solid #03AA96;
				color: #fff;
			}
		}
	}
	.imglist {
		padding: 24rpx 34rpx;
		background: #fff;
		border-bottom: 1rpx solid #EAEAEA;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;

		.imgbox {
			width: 160rpx;
			height: 160rpx;
			margin-right: 14rpx;
			position: relative;
			margin-bottom: 24rpx;
			border: 1rpx solid #EAEAEA;

			.delimg {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				position: absolute;
				right: -16rpx;
				top: -16rpx;
				background: rgba(0, 0, 0, 0.5);
				z-index: 2;
				color:#fff;
				font-size:26rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.selfimg {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}

	.fllow_file_li {
		padding: 24rpx 34rpx;
		background: #fff;
		border-bottom: 1rpx solid #EAEAEA;

		.fil_li {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 14rpx;

			.fileimg {
				width: 20rpx;
				height: 20rpx;
			}

			.filename {
				font-size: 24rpx;
				color: #999999;
			}

			.closeimg {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.create_customer {
		font-size: 28rpx;

		.info_head {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
			color: #999;
			padding-left: 70rpx;
		}

		.mar_top {
			margin-top: 30rpx;
		}
		.fllow_form_text{
			background-color: #fff;
			border-bottom: 1rpx solid #EAEAEA;
			padding: 30rpx 40rpx;
			color: #999;
			font-size: 32rpx;
			.theme {
				color: #5ca9fe;
			}
			text {
				color: #f00;
				margin-left: 10rpx;
			}
			.detailText{
				width:85%;
				background:#f8f8f8;
				border-radius: 10rpx;
				height:120rpx;
				padding:10rpx;
				margin:20rpx auto 0;
			}
		}
		.fllow_form {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-bottom: 1rpx solid #EAEAEA;
			padding: 30rpx 40rpx;
			color: #999;
			font-size: 32rpx;
			.nameinput {
				width: 450rpx;
				margin-left: 20rpx;
			}
			.form_right {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #999;
				text-align: right;
				.location {
					width: 450rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
			.theme {
				color: #5ca9fe;
			}
			text {
				color: #f00;
				margin-left: 10rpx;
			}

			.form_input {
				input {
					width: 300rpx;
					text-align: right;
					height: 100rpx;
					line-height: 100rpx;
					text-align: right;
					margin-right: 10rpx;
				}
			}
		}

		.fllow_area {
			background-color: #fff;
			// padding: 0 70rpx;
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			color: #999;

			.area_head {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				padding: 0 55rpx;

				text {
					color: #f00;
				}
			}

			textarea {
				width: 80%;
				height: 300rpx;
				padding: 30rpx;
				background: #f8f8f8;
				margin: 0 auto;
			}
		}
	}
	.set_head {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0;
		padding: 0 24rpx;
		background-color: #fff;
		height: 120rpx;
		line-height: 120rpx;
		border-bottom: 1rpx solid #EAEAEA;
		border-top: 1rpx solid #EAEAEA;
	
		.set_img {
			image {
				vertical-align: middle;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}
	
		.set_name {
			display: flex;
		}
	}
</style>
